import React from 'react';
import {TimePicker,Select,Button, Input, Spin, DatePicker,Icon,TreeSelect,Modal,message} from 'antd';
import styles from './AddItem.less';
import {VtxModalList, VtxModal, VtxDatePicker} from 'vtx-ui';
import {NAME_SPACE, AddForm} from './config'
import moment from 'moment'

const Option = Select.Option;

class Index extends React.Component{
  constructor(props){
    super(props)
    this.hideHandle = this.hideHandle.bind(this)
    this.submitHandle = this.submitHandle.bind(this)
    this.valueChange = this.valueChange.bind(this)
    this.state = {
      userId: ''
    }
  }

  valueChange(value){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        bindUserId: value
      }
    })
  }

  hideHandle(){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        BindingVisable: false
      }
    })
  }

  submitHandle(){
    const {dispatch} = this.props 
    dispatch({
      type: `${NAME_SPACE}/insertUserCar`,
      payload: {}
    })
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        BindingVisable: false
      }
    })
  }

  render(){

    const {
      dispatch,
      BindingVisable,
      userList,
      bindUserId,
    } = this.props

    const modalProps = {
      footer: [
        <Button key="back" onClick={this.hideHandle}>取消</Button>,
        <Button key="ok" type="primary" onClick={this.submitHandle}>确定</Button>,
      ],
      onCancel: this.hideHandle,
      onOk: this.submitHandle,
      maskClosable: false,
      title: '绑定人员',
      visible: BindingVisable,
      width: 400,
    }

    return(
      <div>
        <VtxModal {...modalProps}>
          <div>
            <VtxModalList
              ref={(lis) => {this.lis = lis}}
              visible={BindingVisable}
              isRequired={true}
            >
              <Select
                value = {bindUserId}
                onChange={(value) =>{
                    this.valueChange(value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '人员',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: bindUserId,
                  }
                }}
              >
                {
                  Array.isArray(userList)?
                    userList.map((item) => {
                      return (<Option value={item.userId}>{item.userName}</Option>)
                    })
                  :''
                }
              </Select>
            </VtxModalList>
          </div>
        </VtxModal>
      </div>
    )
  }
}

export default Index